<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1, user-scalable=no">
  <script src="./lib/vue.js"></script>
  <!-- <script src="./lib/vue.min.js"></script> -->
  <link rel="stylesheet" href="./lib/vant@2.12.54_lib_index.css">
  <link rel="stylesheet" href="./styles/vant.css" />
  <script src="./lib/vant@2.12.54_lib_vant.min.js"></script>
  <script src="./lib/axios-0.18.0.js"></script>
  <script src="./http/request.js"></script>
  <script src="./areaList/orderAreaList.js"></script>
  <title>代跑跑</title>
  <style>
    .van-overlay {
      display: flex;
      flex-direction: column;
      justify-content: center;
      z-index: 99999;
    }

    .main {
      overflow: scroll;
      height: 85vh;
    }

    .van-tabbar-item__icon {
      font-size: 30px;
    }

    .my-swipe .van-swipe-item {
      color: #fff;
      font-size: 20px;
      text-align: center;
    }

    .my-swipe .van-swipe-item img {
      width: 100%;
      height: 100%;
    }

    .filter {
      width: 44px;
      height: 44px;
      line-height: 44px;
      text-align: center;
    }

    .orderItem {
      margin: 16px 0;
      position: relative;
      width: 100%;
      height: 25%;
      border-radius: 8px;
      background-color: #fff;
    }

    .van-cell-group {
      background-color: var(--van-doc-background);
    }

    .order-tag {
      display: flex;
      padding: 8px 10px;
      justify-content: space-between;
    }

    .tag-left {
      display: flex;
      align-items: center;
    }

    .tag-right {
      display: flex;
      align-items: center;
      color: var(--van-warnning);
    }

    .van-divider {
      margin: 0 15px;
      border-color: #cccccc91;
    }

    .order-info {
      display: flex;
      width: 100%;
      padding: 12px 12px;
      font-size: 16px;
    }

    .order-info .left {
      font-size: 14px;
    }

    .order-info .right {
      display: flex;
      flex: 1;
      flex-direction: column;
      justify-content: flex-end;
      align-items: flex-end;
    }

    .order-info .right .van-button--small {
      font-size: 16px;
      width: 80px;
    }

    .waiting {
      color: #fff;
      background-color: var(--van-primary);
      border: 1px solid var(--van-primary);
    }

    .doing {
      background-color: #fff;
      color: var(--van-warnning);
      border: 1px solid var(--van-warnning);
    }

    .taken {
      background-color: #fff;
      color: var(--van-success);
      border: 1px solid var(--van-success);
    }

    .done {
      background-color: #fff;
      color: var(--van-done);
      border: 1px solid var(--van-done);
    }

    .cannel {
      background-color: #fff;
      color: var(--van-danger);
      border: 1px solid var(--van-danger);
    }

    .order-confirm {
      display: flex;
      flex-direction: column;
      width: 100%;
      height: 100%;
      padding: 35px;
    }

    .order-confirm .order-confirm-info {
      margin: 5px 0;
    }

    .order-confirm .order-confirm-info .van-icon {
      color: var(--van-primary);
    }

    .order-confirm .confirm-btn {
      display: flex;
      justify-content: center;
      font-size: 16px;
    }

    .van-dialog__confirm,
    .van-dialog__confirm:active {
      color: var(--van-primary);
    }

    .cuePopup.van-popup {
      background-color: transparent;
    }

    .van-popup__close-icon {
      color: #000;
    }

    .van-popup__close-icon--top-right {
      top: 8px;
      right: 8px;
    }
  </style>
</head>

<body>
  <div id="app">
    <!-- 标题栏 -->
    <van-nav-bar title="主页"></van-nav-bar>
    <div class="main">
      <!-- 下拉刷新 -->
      <van-pull-refresh v-model="isLoading" @refresh="onRefresh">

        <!-- 轮播图部分 -->
        <van-cell-group inset>
          <van-swipe class="my-swipe" :autoplay="3000" indicator-color="white">
            <van-swipe-item v-for="(item,index) in this.swipesList" @click="clickAdvertisementImg(index)" :key="index">
              <img :src="item.imgUrl">
            </van-swipe-item>
          </van-swipe>
        </van-cell-group>
        <van-cell-group inset>

          <!-- 分类标签页 -->
          <van-tabs v-model="tab" swipeable animated sticky>

            <!-- 热门 -->
            <van-tab title="热门" name="热门">
              <van-cell clickable title="地址筛选" label="点击筛选送达地址"
                        :value="(!filter||filter[0].name === '所有') ? '所有' : filter[1].name"
                        @click="isShowAreaList = true"></van-cell>
              <van-empty v-if="!filteredAllList.length" description="该楼还没有人发单哦"></van-empty>

              <div class="orderItem" v-for="(item,index) in filteredAllList" :key="item.id">
                <div class="order-tag">
                  <div class="tag-left">
                    <span>&nbsp;<van-tag color="#ff976a" plain>{{item.orderType}}</van-tag></span>
                  </div>
                  <div class="tag-right">
                    <span>佣金 {{(+item.amount).toFixed(2)}}&nbsp;&nbsp;&nbsp;</span>
                  </div>
                </div>
                <van-divider></van-divider>
                <div class="order-info">
                  <div class="left">
                    <div class="left-item">
                      <span class="phone-tag">联系方式: </span>
                      <span class="user-phone">{{item.phone}} </span>
                    </div>
                    <div class="left-item">
                      <span class="adderss-tag">送达地址: </span>
                      <span class="address">{{item.address}}</span>
                    </div>
                    <div class="left-item">
                      <span class="update-time-tag">发布时间: </span>
                      <span>{{item.createTime}}</span>
                    </div>
                  </div>

                  <div class="right">
                    <van-button round class="waiting statusBtn" v-if="item.orderStatus === 1" size="small"
                                @click="orderConfirm(item)">帮 Ta
                    </van-button>
                    <van-button round disabled class="doing statusBtn"
                                v-else-if="item.orderStatus === -3||item.orderStatus === 2||item.orderStatus === -2||item.orderStatus === 21||item.orderStatus === 22||item.orderStatus === 23||item.orderStatus === 24||item.orderStatus === 25"
                                size="small">已接单
                    </van-button>
                    <van-button round disabled class="doing statusBtn"
                                v-else-if="item.orderStatus === 3||item.orderStatus === 6" size="small">配送中
                    </van-button>
                    <van-button round disabled class="taken statusBtn" v-else-if="item.orderStatus === 4"
                                size="small">已送达
                    </van-button>
                    <van-button round disabled class="done statusBtn" v-else-if="item.orderStatus === 5"
                                size="small">已完成
                    </van-button>
                  </div>

                </div>
              </div>
            </van-tab>

            <!-- 快递 -->
            <van-tab title="快递" name="快递">
              <div class="orderItem" v-for="(item,index) in packageList" :key="item.id">
                <div class="order-tag">
                  <div class="tag-left">
                    <span>&nbsp;<van-tag color="#ff976a" plain>{{item.orderType}}</van-tag></span>
                  </div>
                  <div class="tag-right">
                    <span>佣金 {{(+item.amount).toFixed(2)}}&nbsp;&nbsp;&nbsp;</span>
                  </div>
                </div>
                <van-divider></van-divider>
                <div class="order-info">
                  <div class="left">
                    <div class="left-item">
                      <span class="phone-tag">联系方式: </span>
                      <span class="user-phone">{{item.phone}} </span>
                    </div>
                    <div class="left-item">
                      <span class="adderss-tag">送达地址: </span>
                      <span class="address">{{item.address}}</span>
                    </div>
                    <div class="left-item">
                      <span class="update-time-tag">发布时间: </span>
                      <span>{{item.createTime}}</span>
                    </div>
                  </div>

                  <div class="right">
                    <van-button round class="waiting statusBtn" v-if="item.orderStatus === 1" size="small"
                                @click="orderConfirm(item)">帮 Ta
                    </van-button>
                    <van-button round disabled class="doing statusBtn"
                                v-else-if="item.orderStatus === 2||item.orderStatus === -2||item.orderStatus === 21||item.orderStatus === 22||item.orderStatus === 23||item.orderStatus === 24||item.orderStatus === 25"
                                size="small">已接单
                    </van-button>
                    <van-button round disabled class="doing statusBtn" v-else-if="item.orderStatus === 3"
                                size="small">配送中
                    </van-button>
                    <van-button round disabled class="taken statusBtn" v-else-if="item.orderStatus === 4"
                                size="small">已送达
                    </van-button>
                    <van-button round disabled class="done statusBtn" v-else-if="item.orderStatus === 5"
                                size="small">已完成
                    </van-button>
                  </div>
                </div>
              </div>
            </van-tab>

            <!-- 代跑腿 -->
            <van-tab title="代跑腿" name="代跑腿">
              <van-empty v-if="!errandList.length" description="还没有人发单哦"></van-empty>
              <div class="orderItem" v-for="(item,index) in errandList" :key="item.id">
                <div class="order-tag">
                  <div class="tag-left">
                    <span>&nbsp;<van-tag color="#ff976a" plain>{{item.orderType}}</van-tag></span>
                  </div>
                  <div class="tag-right">
                    <span>佣金 {{(+item.amount).toFixed(2)}}&nbsp;&nbsp;&nbsp;</span>
                  </div>
                </div>
                <van-divider></van-divider>
                <div class="order-info">
                  <div class="left">
                    <div class="left-item">
                      <span class="phone-tag">联系方式: </span>
                      <span class="user-phone">{{item.phone}} </span>
                    </div>
                    <div class="left-item">
                      <span class="adderss-tag">送达地址: </span>
                      <span class="address">{{item.address}}</span>
                    </div>
                    <div class="left-item">
                      <span class="update-time-tag">发布时间: </span>
                      <span>{{item.createTime}}</span>
                    </div>
                  </div>

                  <div class="right">
                    <van-button round class="waiting statusBtn" v-if="item.orderStatus === 1" size="small"
                                @click="orderConfirm(item)">帮 Ta
                    </van-button>
                    <van-button round disabled class="doing statusBtn"
                                v-else-if="item.orderStatus === 2||item.orderStatus === -2" size="small">已接单
                    </van-button>
                    <van-button round disabled class="doing statusBtn" v-else-if="item.orderStatus === 3"
                                size="small">进行中
                    </van-button>
                    <van-button round disabled class="taken statusBtn" v-else-if="item.orderStatus === 4"
                                size="small">进行中
                    </van-button>
                    <van-button round disabled class="done statusBtn" v-else-if="item.orderStatus === 5"
                                size="small">已完成
                    </van-button>
                  </div>
                </div>
              </div>
            </van-tab>

            <!-- 代课 -->
            <!-- <van-tab title="代课" name="代课">
              <van-empty description="敬请期待"></van-empty>
            </van-tab> -->

            <!-- 代自习 -->
            <!-- <van-tab title="代自习" name="代自习">
              <van-empty description="敬请期待"></van-empty>
            </van-tab> -->

          </van-tabs>

        </van-cell-group>
      </van-pull-refresh>
    </div>

    <!-- 筛选送达地址弹出层 -->
    <van-popup v-model=" isShowAreaList" position="bottom">
      <van-area title="筛选送达地址" :area-list="areaList" @confirm="confirmArea" @cancel="isShowAreaList = false"></van-area>
    </van-popup>

    <!-- 确认接单弹出层 -->
    <van-popup v-model="isShowConfirmPopup" closeable position="bottom" :style="{ height: '35%' }">
      <div class="order-confirm">
        <div class="order-confirm-info">
          <van-icon name="flower-o"></van-icon>&nbsp;任务: 快递代取送货上门
        </div>
        <div class="order-confirm-info">
          <van-icon name="flower-o"></van-icon>&nbsp;悬赏金额:
          {{this.confirmOrderInfo.amount}}
        </div>
        <div class="order-confirm-info">
          <van-icon name="flower-o"></van-icon>&nbsp;取件地址:菜鸟驿站(北门)
        </div>
        <div class="order-confirm-info">
          <van-icon name="flower-o"></van-icon>&nbsp;送达地址:
          {{this.confirmOrderInfo.address}}
        </div>
        <div class="order-confirm-info" v-if="!this.confirmOrderInfo.orderType === '代跑腿'">
          <van-icon name="flower-o"></van-icon>&nbsp;送达时间:
          {{this.confirmOrderInfo.expectTime}}
        </div>
        <div class="confirm-btn">
          <van-button type="primary" round @click="acceptOrder">确认接单</van-button>
        </div>
      </div>
    </van-popup>

    <!-- 遮罩层 -->
    <van-overlay :show="isShowOverlay">
      <van-loading size="40px" vertical><span style="font-size: 16px;">加载中</span></van-loading>
    </van-overlay>

    <!-- 轮播图广告弹出层 -->
    <van-popup v-model="isShowSwipePopup" class="cuePopup">
      <van-image width="55vw" :src="this.swipePopupItem?.poppingImg"></van-image>
    </van-popup>

    <!-- 成为帮手QR弹出层 -->
    <van-popup v-model="isShowHelperQR" class="cuePopup">
      <van-image width="55vw" src="img/HelperQR.png"></van-image>
    </van-popup>

    <!-- 初始广告弹出层 -->
    <van-popup class="cuePopup" v-model="isShowCue" closeable close-icon="close">
      <van-image width="55vw" :src="this.advertisement?.advertImg" @click="onAdvertisementClick">
      </van-image>
    </van-popup>

    <!-- 底层标签页 -->
    <van-tabbar class="tabbar" v-model="active" @change="onChange">
      <van-tabbar-item icon="wap-home" name="home">主页</van-tabbar-item>
      <van-tabbar-item icon="shop" name="information">商家</van-tabbar-item>
      <van-tabbar-item icon="thumb-circle" name="distribute">下单</van-tabbar-item>
      <van-tabbar-item icon="bars" name="order">订单</van-tabbar-item>
      <van-tabbar-item icon="manager" name="personalCenter">我的</van-tabbar-item>
    </van-tabbar>
  </div>
</body>
<script>
  new Vue({
    el: "#app",
    data() {
      return {
        active: 'home', // 控制底层标签栏的显示
        tab: '热门', // 控制标签页的显示
        isShowCue: false, // 是否显示定制化广告
        isforbid: false, // 是否启动禁用模式
        isShowOverlay: false, // 是否显示遮罩层
        isShowConfirmPopup: false, // 是否展示确认接单弹出层
        isLoading: false, // 是否展示下拉刷新加载样式
        isShowSwipePopup: false, // 是否展示轮播图的弹出广告
        isShowHelperQR: false, // 是否展示成为帮手二维码弹出层
        isShowAreaList: false, // 是否展示地址选择框
        allList: [], // 热门列表
        packageList: [], // 快递列表
        errandList: [], // 跑腿列表
        confirmOrderInfo: {}, // 单个订单数据
        advertisement: {}, // 广告数据
        swipesList: [{
          "imgUrl": "./img/ad5.png",
          "popping": -1,
        }], // 轮播图数据
        swipePopupItem: {}, // 轮播图弹出广告数据
        areaList: orderAreaList,
        filter: [{ name: '所有' }], // 过滤器
        filteredAllList: [], // 过滤后的订单列表 
      }
    },
    methods: {
      // 下拉刷新功能
      onRefresh() {
        // 非登陆状态下开启遮罩层 禁止点击
        if (this.isforbid) {
          this.isShowOverlay = true
          return
        }
        // 请求订单列表数据
        this.getAllOrderList()
        setTimeout(() => {
          // 刷新成功提示
          this.$toast('刷新成功')
          // 关闭下拉刷新
          this.isLoading = false
        }, 1000)
      },
      // 点击定制化弹窗广告
      onAdvertisementClick() {
        // 非登陆状态下开启遮罩层 禁止点击
        if (this.isforbid) {
          this.isShowOverlay = true
          return
        }
        // 获取广告数据
        const advertisement = this.advertisement
        if (advertisement.popping === 0) {
          // popping 0 表示跳转
          location.href = advertisement.advertUrl
        } else if (advertisement.popping === 1) {
          // popping 1 表示弹出对话框
          axios({
            method: 'GET',
            url: advertisement.poppingUrl
          }).then(res => {
            if (res.code === 1) {
              // 成功响应 提示成功信息
              this.$toast(res.msg)
              // 关闭定制化弹窗广告
              this.isShowCue = false
            }
          })
        } else if (res.code === -1) {
          // popping -1 表示无操作广告
          console.log('用户点击了无操作广告')
          // 关闭定制化弹窗广告
          this.isShowCue = false
        }
      },
      // 点击轮播图广告
      clickAdvertisementImg(index) {
        // 非登陆状态下开启遮罩层 禁止点击
        if (this.isforbid) {
          this.isShowOverlay = true
          return
        }
        // 通过列表索引 index 获取具体的广告数据
        const swipeItem = this.swipesList[index]
        if (swipeItem.popping === 0) {
          // popping 0 表示跳转
          location.href = swipeItem.adlink
        } else if (swipeItem.popping === 1) {
          // popping 1 表示弹出广告
          // 将具体的广告数据 传入响应式数据
          this.swipePopupItem = swipeItem
          this.isShowSwipePopup = true
        } else if (swipeItem.popping === 2) {
          // popping 2 表示弹出消息
          this.swipePopupItem = swipeItem
          this.$toast.fail(this.swipePopupItem.msg)
        } else if (swipeItem.popping === -1) {
          // popping -1 表示无操作广告
          console.log('用户点击了无操作广告')
        }
      },
      // 确认订单
      orderConfirm(item) {
        // 非登陆状态下开启遮罩层 禁止点击
        if (this.isforbid) {
          this.isShowOverlay = true
          return
        }
        // 将具体的订单数据 传入响应式数据
        this.confirmOrderInfo = item
        // 弹出确认接单弹窗
        this.isShowConfirmPopup = true
      },
      // 确认接单
      acceptOrder() {
        // 关闭确认接单弹窗
        this.isShowConfirmPopup = false
        const id = this.confirmOrderInfo.id
        axios({
          method: 'PUT',
          url: `/user/order/takeOrder/${id}`,
        }).then(async res => {
          if (res.code === 1) {
            this.$toast.success('接单成功')
            this.getAllOrderList()
            setTimeout(() => {
              this.$notify({
                color: '#fff',
                background: '#2ED0DF',
                message: '请到订单页面查看订单详细信息'
              })
            }, 2000)
          } else if (res.code === 0 && res.msg === '是否成为帮手') {
            this.$dialog.confirm({
              message: res.msg
            }).then(() => {
              this.isShowHelperQR = true
            }).catch(() => {
            })
          } else if (res.code === 0 && res.msg === '不能接自己的订单哦~') {
            this.$dialog.alert({
              message: res.msg
            })
          } else if (res.code === 0 && res.msg === '该订单已经被接了哦~') {
            this.$dialog.alert({
              message: res.msg
            })
          } else if (res.code === 0 && res.msg === '请先去个人中心完善信息哦~') {
            this.$dialog.alert({
              message: res.msg
            })
          } else if (res.code === 0 && res.msg === '请完成已接订单，才能继续接单哦~') {
            this.$dialog.alert({
              message: res.msg
            })
          }
        })
      },
      // Tabbar 跳转其他页面
      onChange(index) {
        // 非登陆状态下开启遮罩层 禁止点击
        if (this.isforbid) {
          this.isShowOverlay = true
          return
        }
        location.href = `./${index}.html`
      },
      // 获取参数
      GetQueryString(name) {
        var reg = new RegExp("(^|&)" + name + "=([^&]*)(&|$)")
        var r = window.location.search.substring(1).match(reg)
        if (r != null) {
          return decodeURIComponent(r[2])
        }
        return ''
      },
      // 获取轮播图信息
      async getSwipes() {
        const res = await axios({ method: 'GET', url: '/user/home/carousel' })
        this.swipesList = res.data

      },
      // 获取广告信息
      async getPopupAdvert() {
        const flag = this.GetQueryString('flag')
        const res = await axios({ method: 'GET', url: '/user/home/advert' })
        if (flag === '0' || res.code === 0 || !res.data) {
          return
        } else {
          this.isShowCue = true
          this.advertisement = res.data
        }
      },
      // 请求订单列表
      async getAllOrderList() {
        const response = await axios({ method: 'GET', url: '/user/home/getAll', })
        if (response.code === 1) {
          this.allList = response.data.listAll
          this.packageList = response.data.expressList
          this.errandList = response.data.errandList
          this.filter = [{ name: '所有' }]
        }
      },
      confirmArea(values) {
        this.isShowAreaList = false
        this.filter = values
      }
    },
    async mounted() {
      const token = this.GetQueryString('token')
      if (!token) {
        if (!localStorage.getItem('dppToken')) {
          this.isforbid = true
          location.href = 'https://open.weixin.qq.com/connect/oauth2/authorize?appid=wx576478355cd34bb0&redirect_uri=http%3A%2F%2Ftinycnc.cn%2Fuser%2Fuser%2Flogin&response_type=code&scope=snsapi_userinfo&state=1&connect_redirect=1#wechat_redirect'
        }
        await this.getSwipes()
        await this.getAllOrderList()
        await this.getPopupAdvert()
      } else {
        localStorage.setItem('dppToken', token)
        await this.getSwipes()
        await this.getAllOrderList()
        await this.getPopupAdvert()
      }
    },
    watch: {
      filter(newVal) {
        if (newVal[0].name === '所有') {
          this.filteredAllList = this.allList
        } else {
          this.filteredAllList = this.allList.filter(item => item.address.split('/')[0] === newVal[1].name)
        }
      }
    }
  })
</script>

</html>